<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="header">
				<image class="image" src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753777151828_3963ac68/huiyuan.png?x-oss-process=image/resize,w_300" mode="" v-if="platform == 'Android'">
				</image>
				<view class="title" v-if="platform == 'Android'">
					牛顿会员
				</view>
				<view class="title" v-if="platform == 'Android'">
					VIP: {{ current }} - {{ nextCurrent }}
				</view>
				<image class="iosimage"
					src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/4/12/1744467309512_9aeb2526/tushu.png"
					mode="" v-if="platform == 'iOS'">
				</image>
				<view class="ios_title">
					<view class="price">价格198元</view>
					<view class="constprice">原价300元</view>
				</view>
			</view>
			<view class="buttons" @click="submit">
				{{ platform == 'Android' ? '成为会员' : '立即购买' }}
			</view>
			<view class="radio">
				<u-radio-group v-model="payment" placement="row">
					<u-radio name="1" label="微信支付" shape="square"></u-radio>
					<!-- <u-radio name="2" label="支付宝支付" shape="square"></u-radio> -->
				</u-radio-group>
			</view>
			<view class="bottom">
				<view class="bottom_title">
					{{ platform == 'Android' ? '成为会员的好处' : '成为牛顿的好处' }}
				</view>
				<div class="bottom_pres">
					<view class="bottom_pre">
						1. 可以查看任何题的答案
					</view>
					<view class="bottom_pre">
						{{ platform == 'Android' ? '2. 在会员期内不限数量' : '2. 在牛顿爱好期内不限数量' }}
					</view>
				</div>
				<view class="bottom_title" @click="xieyi">
					会员服务协议
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '../../utils/mixin'
	import {
		openVip,
		decodeOpenid,
		payOrder,
		createOrderForApp
	} from '@/api/index.js'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				platform: '',
				current: '',
				nextCurrent: '',
				payment: '1',
			}
		},
		onLoad(options) {
			// 状态栏高度
			this.getSystemInfo();
			// 机型判断
			this.checkPlatform()
			// 获取当前年月日
			this.getDate()
		},
		methods: {
			xieyi(){
				uni.navigateTo({
					url: '/subpackage3/xieyi/xieyi'
				})
			},
			// 机型判断
			checkPlatform() {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === 'android') {
					this.platform = 'Android';
				} else if (systemInfo.platform === 'ios') {
					this.platform = 'iOS';
				} else {
					this.platform = 'Android';
				}
				console.log('当前平台是：' + this.platform);
			},
			// 获取日期
			getDate() {
				// 获取当前日期
				const currentDate = new Date();

				// 获取当前年月日
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1
				const currentDay = currentDate.getDate();

				this.current = `${currentYear}/${currentMonth}/${currentDay}`

				// 获取相隔一年的日期
				const nextYearDate = new Date(currentDate);
				nextYearDate.setFullYear(currentYear + 1);

				const nextYear = nextYearDate.getFullYear();
				const nextMonth = nextYearDate.getMonth() + 1;
				const nextDay = nextYearDate.getDate();
				this.nextCurrent = `${nextYear}/${nextMonth}/${nextDay}`
			},
			async submit() {
				const that = this
				// #ifdef APP-PLUS
				const response = await openVip({})
				createOrderForApp({
					outTradeNo: response.data.outTradeNo,
					totalFee: response.data.totalFee,
					body: "开通会员"
				}).then(res => {
					const orderInfo = {
						package: res.data.package,
						appid: res.data.appid,
						sign: res.data.sign,
						partnerid: res.data.partnerid,
						prepayid: res.data.prepayid,
						noncestr: res.data.noncestr,
						timestamp: res.data.timestamp
					}
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: orderInfo,
						success(res) {
							if (res.errMsg ==
								"requestPayment:ok") {
								console.log('支付成功',
									res)
								uni.$u.toast("抢购成功")
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 2000)

							} else {
								console.log('支付失败')
							}
						},
						fail(res) {
							console.log('支付失败', res)
						}
					})
				})
				// #endif

				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success(res) {
						if (res.code) {
							// 根据code获取openid
							openVip({}).then(res1 => {
								if (res1.code == 200) {
									decodeOpenid({
										code: res.code
									}).then(response => {
										// 获取支付核心参数，预支付
										payOrder({
											totalFee: res1.data.totalFee,
											outTradeNo: res1.data.outTradeNo,
											body: res1.data.body,
											openid: response.msg
										}).then(res => {
											if (res.code == 200)
												// 支付
												wx.requestPayment({
													timeStamp: res.data.body
														.timeStamp, //时间戳
													nonceStr: res.data.body
														.nonceStr, //随机字符串
													package: res.data.body
														.package, //prepay_id
													signType: res.data.body
														.signType, //签名算法MD5
													paySign: res.data.body
														.paySign, //签名
													success(res) {
														if (res.errMsg ==
															"requestPayment:ok") {
															console.log('支付成功',
																res)
														} else {
															console.log('支付失败')
														}
													},
													fail(res) {
														console.log('支付失败', res)
													}
												})
										})
									})
								}

							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
				// #endif

				// const res = await openVip({})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		/deep/ .u-radio__icon-wrap {
			height: 20px !important;
			width: 20px !important;
		}

		/deep/ .u-radio__text {
			font-size: 30rpx !important;
		}

		/deep/ .u-icon__icon {
			font-size: 17px !important;
		}

		/deep/ .u-radio-group {
			justify-content: space-around !important;
		}

		.view {
			width: calc(100% - 60rpx);
			height: calc(100% - 60rpx);
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;

			.header {
				width: 100%;
				margin-top: 100rpx;
				margin-bottom: 100rpx;

				.image {
					margin-left: 50%;
					transform: translateX(-50%);
					width: 170rpx;
					height: 170rpx;
				}

				.title {
					text-align: center;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: rgb(179, 173, 173);
				}

				.iosimage {
					width: 370rpx;
					height: 452rpx;
					margin-left: 50%;
					transform: translateX(-50%);
				}

				.ios_title {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					justify-content: center;

					.price {
						font-size: 44rpx;
					}

					.constprice {
						font-size: 24rpx;
						color: rgb(179, 173, 173);
						margin-left: 20rpx;
						text-decoration: line-through;
					}
				}
			}

			.buttons {
				margin: 50rpx auto 0;
				width: 400rpx;
				height: 80rpx;
				background-color: rgba(34, 175, 229);
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 10rpx;
				letter-spacing: 4rpx;
			}

			.radio {
				margin-top: 60rpx;
				height: 40rpx;
			}

			.bottom {
				margin-top: 100rpx;

				.bottom_pre {
					font-size: 24rpx;
					line-height: 2;
				}

				.bottom_pres {
					margin-top: 40rpx;
					margin-left: 40rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>